<template>
  <el-dialog title="角色分配" :visible="showRoleDialog" @close="btnCancel">
    <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
    <el-checkbox-group v-model="roleIds">
      <!-- 要循环的选项 -->
      <!-- 要显示角色名称   存储角色的id    label表示要存储的值 -->
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
        {{ item.name }}
        <!-- 使用插值表达式把要显示的值直接显示出来  而且存储的还是id -->
      </el-checkbox>
    </el-checkbox-group>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { getRoleList } from '@/api/setting'// 引入获取角色列表api
import { getUserDetailById } from '@/api/user'// 获取用户当前所拥有的角色
import { assignRoles } from '@/api/employees' // 引入给员工分配角色接口
export default {
  name: 'AssignRoleIndex', // 组件名称
  components: {// 注册组件
  },
  filters: {// 局部过滤器
  },
  props: { // 父传递数据
    showRoleDialog: { // 控制组件显示隐藏
      type: Boolean,
      default: false
    },
    userId: { // 用来查询当前分配角色的是哪个用户
      type: String,
      default: null
    }
  },
  data () { // 数据变量
    return {
      list: [], // 角色列表
      roleIds: []// 负责存储当前用户所拥有的角色id  就是当前我这个用户有的角色
    }
  },
  computed: {// 计算属性
  },
  watch: {// 事件侦听
  },
  activated () { // 组件激活时调用的函数
  },
  created () { // data数据加载完毕执行函数
    this.getRoleList()
  },
  mounted () { // DOM首次加载完毕时执行的函数
  },
  updated () { // 数据更新时执行的函数,执行多次
  },
  methods: { // 函数定义
  // 打开权限分配组件就立刻获得角色列表
    async getRoleList () {
      const { rows } = await getRoleList()// 默认值取10条数据
      // rows是要循环的角色列表
      this.list = rows// 拿到全部的角色列表
    },
    // props传数据是异步的，所以这里没办法使用它，可以用父组件来调用它
    async getUserDetailById (id) {
      const { roleIds } = await getUserDetailById(id)// 将用户当前所拥有的角色赋值给当前用户所拥有的对象
      this.roleIds = roleIds
    },
    // 点击确认分配角色
    async btnOk () {
      await assignRoles({ id: this.userId, roleIds: this.roleIds })// 保存用户的角色
      // 关闭组件
      this.$emit('update:showRoleDialog', false)
    },
    // 取消分配角色
    btnCancel () {
      this.roleIds = [] // 清空原来的数组
      this.$emit('update:showRoleDialog', false)
    }
  }

}
</script>
<style lang='less' scoped>
</style>
